<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="com.yaodian100.core.common.utils.ServerValue"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@	taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %> 
<%@ include file="/taglibs.jsp"%>
<c-rt:set var="midContextPath" value='<%=ServerValue.getMidContextPath()%>'/>
<style type="text/css">
	h1 span{visibility:visible;}
	td span{visibility:visible;}
	.msg{float:left; line-height:1em; margin:0; display:block;border:1px solid #f66;padding:2px 5px;*padding:2px 5px 1px;}
	.msg.rn{background-color:#fff2f2;border-color:#f66;}
</style>
<script type="text/javascript" charset="UTF-8" >
	$(function() {
		
		var loadingDialog = $("#loadingImg");
		loadingDialog.dialog({
			bgiframe: true,
			modal: true,
			autoOpen: false
		});
		
		$("#topCategory").change(function(){
			if ( null == $(this).val() || $(this).val() == '' ){
				return false;
			}
			
			var mainForm = $(this).parents("form:first");
			mainForm.attr("action", "topCategorySelected.do");
			mainForm.submit();
		});
		$("#secondCategorySelect").change(function(){
			if ($(this).val() == "") {
				return false;
			}
	    	loadingDialog.dialog('open');
			$(this).parents("form:first").submit();
		});
	});
	
</script>
<script type="text/javascript" charset="UTF-8" >
	function insertProductRowsToTable(productRowHtml) {
    	$(".insertClickedRows").after(productRowHtml);
    	$(".messageDisplay").remove();
	}
	
	function insertProduct(anchor) {
		//插入
		var insertClickedRowMarkClass = "insertClickedRows";
		var productSelectWindow = $("#productSelectWindow");
		var loadingDialog = $("#loadingImg");

		var categoryId = anchor.next("input:first").val();
		$.ajax({
		    url: '${midContextPath}/reportProductClick/productSelect/productSearch.do',
		    type: 'post',
		    data: {categoryId:categoryId},//第二層 categoryId，查詢所有這個第二層 categoryId 下面的 category 的商品
		    cache: false,
		    beforeSend: function( strData ){
		    	loadingDialog.dialog('open');
			},
		    success: function( strData ){
		    	loadingDialog.dialog('close');
		    	productSelectWindow.html(strData);
		    	productSelectWindow.dialog('open');
			}
		});	  
		return false;
	}
</script>

<h1>商品人气排行管理</h1>
<s:actionerror />
<s:actionmessage />
<br/>
<form id="mainForm" method="post" action="view.do">
	<div class="data-form">
		馆类别
		<s:select
			name="topCategoryId"
			id="topCategory"  
			list="categoryRoot" 
			listKey="id" 
			listValue="name"
			headerKey=""
			headerValue="请选择"
			cssClass="selCont"
			/>
		<s:select 
			id="secondCategorySelect" 
			name="categoryId" 
			list="categoryList" 
			listKey="id" 
			listValue="name" 
			headerKey=""
			headerValue="请选择"
			cssClass="selCont"
			/>
			<s:if test="%{fieldErrors['categoryId'] != null}">
				<span id="tab1Tip" class="msg rn" >
					<s:fielderror fieldName="categoryId"></s:fielderror>
				</span>
			</s:if>
	</div>

	<br/>
	<s:hidden name="querySubmitted" value="true"></s:hidden>
	<s:hidden name="retroDays" ></s:hidden>
	
	<s:if test="%{categoryId != null && categoryId != ''}">
		<table class="tb-1" id="mainTable" >
			<thead>
				<tr>
					<th></th>
					<th>商品图</th>
					<th>商品编号</th>
					<th>商品名称</th>
					<th>会员价</th>
					<th>功能</th>
				</tr>
			</thead>
			<tbody>
				<s:if test="%{viewReportProductClickList == null || viewReportProductClickList.size() <= 0}">
					<!--設定 class，當作插入 row 的目標-->
					<tr class="insertClickedRows messageDisplay">
						<td colspan="6">
							查無資料
							<input type="button" value="新增" onClick="insertProduct($(this));" />
							<s:hidden name="categoryId" disabled="true"></s:hidden> 
						</td>
					</tr>
				</s:if>
				<s:else>
					<tiles:insertAttribute name="productRows" ignore="false" />
				</s:else>
			</tbody>
		</table>
	</s:if>
	<s:if test="%{categoryId != null && categoryId != ''}">
		<s:submit id="saveButton" value="储存" action="viewByCategory/save"></s:submit>
	</s:if>
	
</form>

<div id="loadingImg" style="display:none;">
	<img src="/images/loading.gif"/>资料载入中,请稍候...
</div>
<form id="selectedProductListForm">
	<s:hidden name="categoryId"></s:hidden>
	<s:hidden name="newRecords" value="true" ></s:hidden>
</form>
<script type="text/javascript" charset="UTF-8" >
	$(function() {
		var insertClickedRowMarkClass = "insertClickedRows";
		var productSelectWindow = $("#productSelectWindow");
		
		productSelectWindow.dialog({
			width: 1000,
			bgiframe: true,
			modal: true,
			autoOpen: false,
			close: function() {
		    	$(".insertClickedRows").removeClass(insertClickedRowMarkClass);//插入後清除插入列的標記
		    	var productIdForm = $("#selectedProductListForm");
		    	var savedProductIdInputs = productIdForm.children(":[name='selectedProductId']");
		    	savedProductIdInputs.remove();//清空用來存放 product id 的 form
			}
		});
		
		//儲存
		$("#saveButton").click(function() {
			var newRecordCount = $("input:hidden:[name='newRecord']:[value='true']").length;
			if (newRecordCount > 5) {
				alert('插入筆數不可多於 5 笔');
				return false;
			}
		});
	});
	
</script>
<div id="productSelectWindow" style="display:none;">
</div>